<script lang="ts" setup name='ContentTea'>
import { reactive } from 'vue';
const cards1 = reactive([
  {
    id: 1,
    iconClass: 'icon-1',
    title: '课后答疑',
    description: '虚拟教师能够即时回答学生的问题，避免学生疑问积累'
  },
  {
    id: 2,
    iconClass: 'icon-2',
    title: '引导式教学',
    description: '通过引导学生发现自身的知识盲点，提供针对性的学习建议'
  },
  {
    id: 3,
    iconClass: 'icon-3',
    title: '学习路径规划',
    description: '根据学生的学习情况，智能规划个性化的学习路径'
  },
  {
    id: 4,
    iconClass: 'icon-4',
    title: '个性化定制',
    description: '根据学生的学习情况，提供个性化的练习题，帮助巩固知识。'
  },
  {
    id: 5,
    iconClass: 'icon-5',
    title: '自适应学习',
    description: '系统根据学生的学习表现，动态调整教学内容和难度'
  }
])

const cards2 = reactive([
  {
    id: 1,
    iconClass: 'icon-1',
    title: '学习状态监控',
    description: '智慧课堂实时监控学生的学习状态，帮助教师了解每个学生的学习进度'
  },
  {
    id: 2,
    iconClass: 'icon-2',
    title: '反馈系统',
    description: '教师可以实时获得学生对知识点的理解情况，及时调整教学策略'
  },
  {
    id: 3,
    iconClass: 'icon-3',
    title: '数据驱动教学',
    description: '利用大数据分析，提供科学的教学建议和改进方案'
  },
  {
    id: 4,
    iconClass: 'icon-4',
    title: '安全保障',
    description: '智慧课堂注重数据安全和隐私保护，确保学生的个人信息不被泄露'
  },
  {
    id: 5,
    iconClass: 'icon-5',
    title: '精准教学',
    description: '智慧课堂收集并分析学生的学习数据，生成详细的报告，帮助教师制定个性化的教学计划'
  }
])

const cards3 = reactive([
  {
    id: 1,
    title: '注意力监测机制',
    description: '专注无限——使用课堂视频的精细视觉分析来探索学生的注意力演变'
  },
  {
    id: 2,
    title: '评估数据可视化',
    description: '以视觉引领教学——我们提供一站式的数据处理与可视化解决方案，助您轻松掌握学生的学习动态，精准识别教学瓶颈'
  },
  {
    id: 3,
    title: '实时精准反馈',
    description: '即刻洞悉，精准反馈——实时精准反馈课堂状况功能，让每一刻教学互动都充满智慧与效率。'
  },
])
</script>
<template>
  <div class="white-space">
    <div class="aiteacher-container">
      <div class="main-header">
        <div class="logo-name">
          <strong>AIToEdu</strong>
        </div>
        <h1>学生私人定制的AI虚拟教师 —— 小*</h1>
        <p>能够及时响应学生的疑问、快速定位学生难点，提供个性化教学方案，帮助学生实现目标。</p>
      </div>

      <div class="card-container">
        <el-card v-for="card in cards1" :key="card.id" shadow="always" :class="{
          'special-card1': card.id === 2 || card.id === 4,
          'special-card2': card.id === 3
        }">
          <div :class="['card-icon', card.iconClass]"></div>
          <div class="card-content">
            <h3>{{ card.title }}</h3>
            <el-divider />
            <p>{{ card.description }}</p>
          </div>
        </el-card>
      </div>
      <div style="margin-top: 25px">
        <el-button class="cta-button" @click="$router.push('/login')">
          <el-icon>
            <ArrowRight />
          </el-icon>
          立即体验
        </el-button>
      </div>
    </div>

    <div class="aiclassroom-container">
      <div class="main-header">
        <div class="logo-name">
          <strong>AIToEdu</strong>
        </div>
        <h1>辅助教师精准教学的智慧课堂</h1>
        <p>即时分析学生上课状态，并向教师实时反馈数据分析结果，以辅助教师进行精准教学。</p>
      </div>
      <div class="card-container">
        <el-card v-for="card in cards2" :key="card.id" shadow="always" :class="{
          'special-card1': card.id === 2 || card.id === 4,
          'special-card2': card.id === 3
        }">
          <div :class="['card-icon', card.iconClass]"></div>
          <div class="card-content">
            <h3>{{ card.title }}</h3>
            <el-divider />
            <p>{{ card.description }}</p>
          </div>
        </el-card>
      </div>
      <div style="margin-top: 25px">
        <el-button class="cta-button" @click="$router.push('/login')">
          <el-icon>
            <ArrowRight />
          </el-icon>
          立即体验
        </el-button>
      </div>
    </div>

    <div class="aianalysis-container">
      <div class="main-header">
        <div class="logo-name">
          <strong>AIToEdu</strong>
        </div>
        <h1>智能学情分析</h1>
        <p>推动AI技术赋能教育行业发展，帮助学生自适应性学习、教师精准教学。</p>
      </div>
      <div class="aianalysis-content">
        <div class="card-container">
          <div class="feature-item" v-for="feature in cards3" :key="feature.id">
            <div class="icon">
              <p> {{ feature.id }} </p>
            </div>
            <div class="content">
              <h3>{{ feature.title }}</h3>
              <p>{{ feature.description }}</p>
            </div>
          </div>
        </div>
        <video width="800" height="500" controls>
          <source src="movie.mp4" type="video/mp4">
        </video>
      </div>
    </div>
  </div>
  <div class="footer-up"></div>
</template>
<style scoped>
.main-content {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 1000px;
  padding: 30px;
  background-image: url("@/assets/svg/welcome/main-background.svg");
  background-size: cover;
}

.main-content .illustration {
  margin-left: 80px;
  margin-top: -5%;
}

.main-content .text-content {
  color: white;
  text-align: left;
  padding-left: 20px;
  margin-right: 70px;
  margin-top: -15%;
}

.main-content .text-content .try-button {
  color: #339AF0;
  font-size: 30px;
  width: 200px;
  height: 70px;
  border-radius: 10px;
}

.main-content h1 {
  font-size: 50px;
  line-height: 1.5em;
}

.white-space {
  height: 2600px;
  background-color: #ffffff;
}

.aiteacher-container {
  display: flex;
  flex-direction: column;
  padding: 4% 10%;
}

.aiteacher-container .main-header {
  align-self: flex-start;
}

.aiteacher-container .main-header .logo-name {
  text-align: left;
  color: #23a6f0;
}

.aiteacher-container .main-header h1 {
  text-align: left;
  font-size: 42px;
  margin: 13px 0;
  color: #2c3e50;
}

.aiteacher-container .main-header p {
  font-size: 16px;
  margin-top: 0;
  color: #1385fb;
}

.aiteacher-container .card-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 20px;
  gap: 80px;
  margin-bottom: 30px;
}

.aiteacher-container .card-container .el-card {
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  width: 260px;
  height: 332px;
}

.card-icon {
  width: 50px;
  height: 50px;
  margin: 0 auto 10px;
}

.icon-1 {
  background-image: url("@/assets/svg/welcome/aiteacher/icon1.svg");
  background-size: cover;
}

.icon-2 {
  background-image: url("@/assets/svg/welcome/aiteacher/icon2.svg");
  background-size: cover;
}

.icon-3 {
  background-image: url("@/assets/svg/welcome/aiteacher/icon3.svg");
  background-size: cover;
}

.icon-4 {
  background-image: url("@/assets/svg/welcome/aiteacher/icon4.svg");
  background-size: cover;
}

.icon-5 {
  background-image: url("@/assets/svg/welcome/aiteacher/icon5.svg");
  background-size: cover;
}

.aiteacher-container .card-content h3 {
  margin: 30px 0;
  font-size: 18px;
}

.aiteacher-container .card-content p {
  font-size: 14px;
}

.special-card1 {
  margin-top: 50px;
}

.special-card2 {
  margin-top: 80px;
  background-color: #3680cc;
  color: white;
}

.aiteacher-container .cta-button {
  padding: 10px 20px;
  margin-top: 10px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  width: 260px;
  height: 50px;
}

.aiclassroom-container {
  display: flex;
  flex-direction: column;
  padding: 4% 10%;
}

.aiclassroom-container .main-header {
  align-self: flex-start;
}

.aiclassroom-container .main-header .logo-name {
  text-align: left;
  color: #23a6f0;
}

.aiclassroom-container .main-header h1 {
  text-align: left;
  font-size: 42px;
  margin: 13px 0;
  color: #2c3e50;
}

.aiclassroom-container .main-header p {
  font-size: 16px;
  margin-top: 0;
  color: #1385fb;
}

.aiclassroom-container .card-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 20px;
  gap: 80px;
  margin-bottom: 30px;
}

.aiclassroom-container .card-container .el-card {
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  width: 260px;
  height: 332px;
}

.aiclassroom-container .card-icon {
  width: 50px;
  height: 50px;
  margin: 0 auto 10px;
}

.aiclassroom-container .cta-button {
  padding: 10px 20px;
  margin-top: 10px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  width: 260px;
  height: 50px;
}

.aianalysis-container {
  display: flex;
  flex-direction: column;
  padding: 4% 10%;
}

.aianalysis-container .main-header {
  align-self: flex-start;
}

.aianalysis-container .main-header .logo-name {
  text-align: left;
  color: #23a6f0;
}

.aianalysis-container .main-header h1 {
  text-align: left;
  font-size: 42px;
  margin: 13px 0;
  color: #2c3e50;
}

.aianalysis-container .main-header p {
  font-size: 16px;
  margin-top: 0;
  color: #1385fb;
}

.aianalysis-container .aianalysis-content {
  display: flex;
}

.aianalysis-container .card-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.aianalysis-container .feature-item {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.aianalysis-container .icon {
  font-size: 40px;
  font-weight: bold;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #339AF0;
  width: 90px;
  height: 90px;
  border-radius: 4em;
  margin-right: 50px;
  box-shadow: 5px 10px 15px 0 #00000050;
}

.aianalysis-container .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 60%;
}

.aianalysis-container .content h3 {
  font-size: 25px;
  margin-bottom: 5px;
}

.aianalysis-container .content p {
  font-size: 16px;
  font-weight: lighter;
  text-align: left;
  color: #48486a;
}


.footer-up {
  background-image: url("@/assets/svg/welcome/footer-background.svg");
  height: 200px;
  background-size: cover;
}
</style>
